<template>
  <div class="userList">
    <div class="filterHead">
        <div class="title">
            <span>用户管理 | 用户列表</span>
        </div>
        <div class="filter_input">
          <input type="text" v-model="userName" placeholder="请输入用户名查找" @keyup.enter="handleEnterKey">
          <button class="filter_button" @click="filterUser">查找</button>
        </div>
    </div>
    <div class="table_box" v-if="total">
        <div class="table_title">
          <div class="table_title_info">用户id</div>
              <div class="table_title_info">用户名称</div>
              <div class="table_title_info">用户密码</div>

        </div>
        <div class="table_item"
             @mouseenter="enterTable(index)" 
             @mouseleave="leaveTable(index)" 
             v-for="(item,index) in currentPageData" 
             :key="index">
        <div class="table" ref="table">
          <div class="table_info">{{ item.id }}</div>
          <div class="table_info">{{ item.username }}</div>
          <div class="table_info">{{ item.password }}</div>
        </div>
        <button class="delButton" ref="delButton" @click="deleteConfirm(item)">删除</button>
        <button class="updateButton" ref="updateButton" @click="updateUser(item)">编辑</button>
      </div>
    </div>
    <el-pagination
    v-if="total"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <div v-else class="empty">
          暂无用户信息
        </div>
  </div>
</template>
  
  <script>
import {findAllUser,findUserByName,deleteUser} from "@/api/admin"
import { Message } from 'element-ui';
import { mapState } from "vuex";
export default {
  name: "userList",
  data(){
    return {
      userList:[],
      pageSize:30, //每页显示条数
      total:0,//总条数
      currentPageData: [], // 当前页显示的数据
      currentPage: 1,// 当前显示的页码，默认为第一页
      userName:""
    }
  },
  mounted(){
    this.init();
  },
  computed: {
    ...mapState("login", ["role"]),
  },
  methods:{
    handleEnterKey() {
           this.filterUser();
        },
    deleteConfirm(item){
            this.$confirm('确认要删除该用户吗？记录删除后将不可恢复', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass:'set_custom_class',
              closeOnClickModal: false,
              type: 'warning'
            }).then(() => {  
             this.deleteUser(item);
            }).catch(() => {
             Message.info("已取消")       
            });
    },
    async deleteUser(item){
      let params={
        id:item.id,
        username:item.username ,
        password:item.password,
        role:"user"
      }
      await deleteUser(params).then((res)=>{
        if(res.data.code===200){
          Message.success("删除成功！")
          window.location.reload();
        }
      }).catch((error)=>{
      console.log(error)
      })
    },
    async updateUser(item){
      this.$router.push({ 
          name: 'userUpdate' ,
          query:{user:JSON.stringify(item)}
         }); 
    },
    enterTable(index){
      this.$refs.table[index].style.transform="translateX(-10px)";
      this.$refs.delButton[index].style.transform="translateX(-10px)";
      this.$refs.updateButton[index].style.transform="translateX(-10px)";
      this.$refs.delButton[index].style.display="flex"
      this.$refs.updateButton[index].style.display="flex"
    },
    leaveTable(index){
      this.$refs.table[index].style.transform="translateX(0px)";
      this.$refs.delButton[index].style.transform="translateX(0px)";
      this.$refs.delButton[index].style.display="none"
      this.$refs.updateButton[index].style.transform="translateX(0px)";
      this.$refs.updateButton[index].style.display="none"      
    },

    async init(){
      let params={
        role:"user",
      }
          await findAllUser(params).then((res)=>{
              if(res.data.code===200){
                  this.userList=res.data.data.userList
              }
          }).catch((error)=>{
              console.log(error)
          })
          this.currentPageData=this.userList.slice(0,1*this.pageSize)  
          this.total=this.userList.length;
          console.log(`当前页数据`,this.currentPageData);
      },
      handleCurrentChange(val) {
          this.currentPageData=this.userList.slice((val-1)*this.pageSize,val*this.pageSize);//把每页的数据传给子组件
          console.log(`当前页: ${val}`);
          console.log(`当前页数据`,this.currentPageData);
      },
    async filterUser(){
      let params={
          userName:this.userName
      }
      await findUserByName(params).then((res)=>{
          if(res.data.code===200){
                this.userList=res.data.data.userList
                this.currentPageData=this.userList.slice(0,1*this.pageSize)  
                this.total=this.userList.length;
            }
      }).catch((error)=>{
      console.log(error)
      })
    }
  }
};
</script>
  
<style scoped>
.userList{
  min-height: 100vh;
}
.table_box{
    margin-top: 0;
    font-family: "STKaiti";
    font-size: 20px;
    box-sizing: border-box;
}
.table_box .table_title{
    font-weight: bold;
    display: flex;
    height: 45px;
    background: #666666;
    overflow: hidden;
    border-radius: 5px;
}
.table_box .table_title .table_title_info{
    flex:1;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    line-height:45px ;
    box-sizing: border-box;
    padding:0 15px;
    text-align: center;
}
.table_box .table_title .table_title_info:nth-child(2){
    flex:3;
}
.table_box .table_title .table_title_info:nth-child(3) {
    flex: 1;
    text-align: center;
    }
.table{
    flex:4;
    display: flex;
    background: #fffcfc;
    border-radius: 5px;
    margin-top:10px ;
    transition: all 0.4s;
}
.table_info {
    flex: 1;
    font-size: 20px;
    color: #333;
    font-weight: normal;
    padding: 10px 10px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
}
.table_info:nth-child(2) {
    font-size: 20px;
    flex:3;
}
.table_info:nth-child(3) {
    flex: 1;
    text-align: center;
}
.table_item{
  display: flex;
}
button:hover{
cursor: pointer;
}
/* .table:hover{
  background:#EBEBEB ;
} */
.delButton,
.updateButton{
  vertical-align: middle;
  margin-top: 10px;
  width:120px;
  height:50px;
  border: 1px solid #cbcaca;
  color:#fff;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.delButton{
  margin-left:10px;
  background:rgba(156,10,10,0.9);
  border-right-style: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.updateButton{
  background:rgba(42,81,77, 1);
  border-left-style: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.filterHead{
    display: flex;
    justify-content: space-between;
    height:50px;
    line-height: 50px;
    color:#666666;
    margin-bottom: 20px;
  }
  .title{
    flex: 3;
    font-size: 18px;
    min-width: 200px;
    padding-left:10px;
  }
  .filter_input{
    flex: 1;
    min-width: 400px;
    flex-wrap: nowrap;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color:#757474;
    position: relative;
  }
  .filter_input input{
    width:280px;
    height:35px;
    padding:4px;
    border:1px solid rgba(42,81,77, 0.7);
    border-radius: 5px;
    background: #eae8e8;
    color:#535252;

  }
  .filter_button{
    color:#fff;
    width:50px;
    height:36px;
    border-radius: 2px;
    /* border-top-left-radius: 0px;
    border-bottom-left-radius: 0px; */
    background:rgba(42,81,77, 1);
    position:absolute;
    top:5px;
    left:230px;
    border:1px solid #9e9d9d;
  }
  .empty{
height: 500px;
text-align: center;
line-height: 500px;
color:#666666;
font-size:20px;
}
</style>